<template>
      <div class="user-detail-container">
            <el-card>
                  <template #header>
                        <div class="card-header">
                              <div class="back-button" @click="goBack">
                                    <el-icon>
                                          <ArrowLeft />
                                    </el-icon>
                                    <span>返回</span>
                              </div>
                              <div class="peopleNum">当前职位人数：{{ currPeople }}/{{ peopleNum }}</div>
                              <span class="header-title">用户列表</span>
                        </div>
                  </template>

                  <div class="scroll-wrapper">
                        <div class="user-list">
                              <div v-if="takeJobUserList.length === 0">
                                    <el-empty description="没有用户接取职位"></el-empty>
                              </div>

                              <div v-else>
                                    <el-card v-for="(user, index) in takeJobUserList" :key="user.userId"
                                          class="user-card" shadow="hover" :class="getCardClass(user.isReceive)">
                                          <div class="user-info">
                                                <p><strong>姓名：</strong>{{ user.username }}</p>
                                                <p><strong>联系方式：</strong>{{ user.phone }}</p>
                                                <p><strong>邮箱：</strong>{{ user.email }}</p>
                                                <p><strong>是否贫困生：</strong>{{ user.isPoor }}</p>
                                                <p><strong>信用积分：</strong>{{ user.creditScore }}</p>
                                                <p><strong>积分等级：</strong>{{ user.level }}</p>
                                                <p><strong>注册时间：</strong>{{ user.createdTime }}</p>
                                                <p><strong>状态：</strong>{{ user.status }}</p>
                                                <p><strong>是否通过：</strong>{{ user.isReceive }}</p>
                                          </div>

                                          <div class="option">
                                                <el-button type="success"
                                                      @click="receiveOrRejectPerson(1, user.userId, user.isReceive)">通过</el-button>
                                                <el-button type="danger"
                                                      @click="receiveOrRejectPerson(2, user.userId, user.isReceive)">拒绝</el-button>
                                                <el-button type="info"
                                                      @click="getCreditDetail(user.userId)">历史信用记录</el-button>
                                                <el-button type="warning" @click="openReportDialog(user)">举报</el-button>
                                          </div>
                                    </el-card>
                              </div>
                        </div>
                  </div>
            </el-card>

            <!-- 信用历史弹窗 -->
            <el-dialog v-model="creditDialogVisible" title="信用积分历史" width="50%">
                  <el-table :data="creditHistoryList" border style="width: 100%">
                        <el-table-column prop="date" label="日期" width="180" />
                        <el-table-column prop="scoreChange" label="积分变动" />
                        <el-table-column prop="reason" label="原因" />
                  </el-table>

                  <template #footer>
                        <span class="dialog-footer">
                              <el-button @click="creditDialogVisible = false">关闭</el-button>
                        </span>
                  </template>
            </el-dialog>

            <!-- 举报弹窗 -->
            <!-- 举报弹窗 -->
            <el-dialog v-model="reportDialogVisible" title="举报用户" width="40%">
                  <p><strong>举报用户：</strong>{{ reportTarget?.username }}</p>
                  <el-form>
                        <el-form-item label="举报原因">
                              <el-input type="textarea" v-model="reportReason" placeholder="请输入举报原因" rows="4"
                                    resize="none" />
                        </el-form-item>

                        <!-- 举报材料上传 -->
                        <el-form-item label="举报材料（图片）">
                              <el-upload class="upload-demo" drag multiple action=""
                                    :auto-upload="false"
                                    :show-file-list="true"
                                    :on-remove="handleRemoveFile"
                                    :before-upload="beforeUpload"
                                    v-model:file-list="uploadedFiles"
                                    list-type="picture-card"
                                    >
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">拖拽文件或 <em>点击上传</em></div>
                                    <div class="el-upload__tip">支持 jpg/png，大小不超过 2MB</div>
                              </el-upload>
                        </el-form-item>
                  </el-form>

                  <template #footer>
                        <span class="dialog-footer">
                              <el-button @click="reportDialogVisible = false">取消</el-button>
                              <el-button type="primary" @click="submitReport">提交</el-button>
                        </span>
                  </template>
            </el-dialog>

      </div>
</template>

<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import useJobTakers from '@/hooks/labor/useJobTakers'
import { computed, nextTick, onMounted, ref } from 'vue'
import type takeJobUserData from '@/interface/takeJobUserData'
import { ElMessage } from 'element-plus'

const router = useRouter()
const goBack = () => router.back()

const {
      REQ_getReceivePeopleNum,
      REQ_getTakeJobUsers,
      receiveOrRejectPerson,
      getCreditDetail,
      takeJobUserList,
      peopleNum,
      currPeople,
      creditDialogVisible,
      creditHistoryList,
      reportDialogVisible,
      reportTarget,
      reportReason,
      openReportDialog,
      submitReport,
      uploadedFiles,
      handleUploadSuccess,
      handleRemoveFile,
      beforeUpload,
} = useJobTakers()

function getCardClass(status: string) {
      switch (status) {
            case '通过':
                  return 'card-success'
            case '拒绝':
                  return 'card-danger'
            default:
                  return ''
      }
}

onMounted(() => {
      nextTick(() => {
            REQ_getTakeJobUsers()
            REQ_getReceivePeopleNum()
      })
})


</script>

<style scoped>
.user-detail-container {
      padding: 24px;
      margin: 0 auto;
}

.card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.back-button {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #409eff;
}

.back-button span {
      margin-left: 4px;
}

.header-title {
      font-weight: bold;
      font-size: 16px;
}

.scroll-wrapper {
      max-height: 650px;
      overflow-y: auto;
      padding-right: 8px;
}

.user-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 12px;
}

.user-card {
      padding: 16px;
      margin-bottom: 10px;
}

.user-info p {
      margin: 4px 0;
      font-size: 15px;
      line-height: 1.6;
}

.peopleNum {
      text-align: right;
}

.option {
      text-align: right;
      margin-top: 12px;
}

.user-card.card-success {
      border: 2px solid #67c23a;
      background-color: #f0f9eb;
}

.user-card.card-danger {
      border: 2px solid #f56c6c;
      background-color: #fef0f0;
}
</style>
